<template>
  <div class="container" style="background: #fff;">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="">
      <span>设备管理</span>
    </div>
    <div class="row">
      <div class="col-md-12">
        <form id="searchForm" class="form-inline">
            <div class="form-group">
              <label class="sr-only" for="exampleInputEmail3">设备名称、设备ID</label>
              <input type="text" class="form-control" id="exampleInputEmail3" placeholder="设备名称、设备ID" name="device" v-model="device">
            </div>
            <div class="form-group xuanze-box">   
                <select class="form-control xuanze" v-model="groupid">
                <option value="">所有设备组</option>
                <option :value="item.groupid" v-for="item in deviceList">{{item.groupname}}</option>
            </select>
            </div>          
          <button type="button" @click="loadData()" class="btn btn-default">搜索</button>
          <router-link :to="{ name: 'AddCameraOnvif'}" class="btn btn-default">添加设备</router-link>
          <button type="button" @click="delAll" class="btn btn-default">批量删除</button>
          <button type="button" @click="exportXml" class="btn btn-default">导出设备配置文件</button>
        </form>
      </div>
    </div>
    <div class="table-responsive sbzgl-tab-list">
      <table class="table table-bordered" id="tblDevice">
          <thead>
            <tr>
              <th width="3%"><input type="checkbox" name="" id="chkAll" @change="checkAll" v-model="isCheckAll"></th>
              <th width="5%">序号</th>
              <th width="8%">设备名称</th>
              <th width="9%">设备ID</th>
              <th width="13%">设备类型</th>
              <th width="9%">关联设备</th>
              <th width="10%">设备组</th>
              <th width="10%">设备信息</th>
              <th width="8%">设备状态</th>
              <th width="8%">录制视频流</th>
              <th width="10%">设备备注</th>
              <th width="15%">操作</th> 
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in page.list">
              <td width="3%" class="tb-td"><input type="checkbox" name="" v-model="selDeviceIds" :value="item.deviceid"></td>
              <td>{{page.limit*(page.pageNum-1)+index+1}}</td>
              <td width="8%">{{item.devicename}}</td>
              <td width="9%">{{item.deviceid}}</td>
              <td width="13%">{{item.devicetype | deviceType}}</td>
              <td width="9%">{{item.corrdevicename||"无"}}</td>
              <td width="10%">{{item.groupname}}</td>
              <td width="10%">
                <Poptip title="提示标题" placement="top">
                  <i-button>查看设备信息</i-button>
                  <div class="api" slot="content">
                  设备登录名：{{item.loginid}}<br>设备登录密码：{{item.loginpwd}}<br>设备IP：{{item.ip}}<br>RTSP端口：{{item.port}}<br>{{item.mainrtsp}}<br>{{item.auxrtsp}}
                  </div>
                </Poptip>
              </td>
              <td width="8%">{{item.devicestate}}</td>
              <td width="8%">{{item.flag==0?"主流":"辅流"}}</td>
              <td width="10%">{{item.note}}</td>
              <td width="15%">
                <a href="#" title=""><span class="glyphicon glyphicon-eye-open"></span></a>&nbsp;
                <a href="" title=""><span class="glyphicon glyphicon-edit"></span></a>&nbsp;
                <a href="javascript:void(0);" title="" @click="del(item.deviceid, item.devicename)"><span class="glyphicon glyphicon-trash"></span></a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="pull-right">
        <my-page v-bind:pageNum="page.pageNum" v-bind:totalPageNum="page.totalPageNum" v-bind:totalNum="page.totalNum" v-bind:pageData="pageData" v-bind:allList="page.allList" v-bind:limit="page.limit"></my-page>
      </div>
  </div>
</template>

<script>
  import page from '@/components/Page.vue'
  import _ from 'lodash'

  export default {
    name: 'DeviceManage',
    components: { 'my-page': page },
    data: function () {
      return {
        group: '',
        page: {
          list: [],
          allList: [],
          pageNum: 1,
          totalPageNum: 0,
          totalNum: 0,
          limit: 10
        },
        deviceList: [],
        device: '',
        groupid: '',
        isCheckAll: false,
        selDeviceIds: []  // checkbox选中的设备id
      }
    },
    created: function () {
      // 获取平台名称
      // this.$http.post('/api/hedacmdreq', {methods: 'PlatInfo'}).then(response => {
      //   console.log('platinfo')
      //   var body = response.data.HedaACK.Body
      //   console.log(body)
      //   this.platName = body.platformname
      // })
      // 获取列表数据
      this.loadData()
      this.deviceInit()
    },
    methods: {
      loadData: function () {
        this.$http.post('/api/hedacmdreq', {method: 'DeviceSearch', device: this.device, groupid: this.groupid}).then(response => {
          this.page.allList = response.data.HedaACK.Body.devicelist || []
          this.page.totalNum = this.page.allList.length || 0
          this.page.totalPageNum = Math.ceil(this.page.totalNum / this.page.limit)
        })
      },
      pageData: function (showList, pageNum) {
        this.page.pageNum = pageNum
        this.page.list = showList
      },
      del: function (id, name) {
        var $this = this
        window.duang.confirm('确认要删除《' + name + '》的设备吗？', function () {
          $this.$http.post('/api/hedacmdreq', {method: 'DeleteDevice', deviceid: id, devicename: name, delrecord: 1}).then(response => {
            window.duang.msg(true, response.data.HedaACK.Body.retMsg)
            $this.loadData()
          })
        })
      },
      deviceInit: function () {
        this.$http.post('/api/hedacmdreq', {method: 'GroupSearch'}).then(response => {
          console.log(response)
          var body = response.data.HedaACK.Body
          this.deviceList = body.grouplist || []
        })
      },
      checkAll: function (e) {  // 选中全部
        if (this.isCheckAll) {
          this.selDeviceIds = []
          _.forEach(this.page.list, (item, i) => {
            this.selDeviceIds.push(item.deviceid)
          })
        } else {
          this.selDeviceIds = []
        }
      },
      delAll: function () { // 批量删除
        var $this = this
        window.duang.confirm('确认要删除所选设备吗？', function () {
          var deviceid = $this.selDeviceIds.join('|')
          if (deviceid) {
            $this.$http.post('/api/hedacmdreq', {method: 'DeleteDevice', 'deviceid': deviceid}).then(response => {
              var body = response.data.HedaACK.Body
              if (body.retCode === '0') {
                this.loadData()
                window.duang.msg(true, body.retMsg)
              }
            })
          }
        })
      },
      exportXml: function () {
        this.$http.post('/api/hedacmdreq', {method: 'SaveDevFile'}).then(response => {
          var body = response.data.HedaACK.Body
          if (body.retCode === '0') {
            window.duang.html('下载配置', '导出成功！<br><a href="' + body.downloadfile + '" target="_blank">点击下载</a>')
          }
        })
      }
    },
    watch: {
      selDeviceIds: function (val) {
        if (val.length < this.page.list.length) {
          this.isCheckAll = false
        }
      }
    },
    filters: {
      deviceType: function (val) {
        var map = {
          '1': '带云台的摄像头',
          '2': '不带云台的摄像头',
          '3': '麦克风',
          '4': '云台',
          '5': '其他'
        }
        return map[val]
      }
    }
  }
</script>
